import React, { Component } from 'react';
import { Card, WhiteSpace, InputItem, List, Badge, Flex, Button, Toast, Icon, ActionSheet, NavBar, WingBlank } from 'antd-mobile';
import { LeftOutlined } from '@ant-design/icons';
import { Link } from "react-router-dom";

import Follow from '../../components/follow/index'
import StickInput from '../../components/stickInput/index'
import MyBadge from '../../components/myBadge/index'

import BarTag from './tag'
import Comment from './conmment'

import AppPage from '../../container/AppPage'// 容器 解决 navbar
import Zmage from 'react-zmage'
import './contentpage.css'


export default class FindPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            clicked: 'none',
            clicked1: 'none',
            clicked2: 'none',
            userData:{},
            contentData:{}
        };
    }
    dataList = [
        { url: 'cTTayShKtEIdQVEMuiWt', title: '生活圈' },
        { url: 'umnHwvEgSyQtXlZjNJTt', title: '微信好友' },
        { url: 'SxpunpETIwdxNjcJamwB', title: 'QQ' },
    ].map(obj => ({
        icon: <img src={`https://gw.alipayobjects.com/zos/rmsportal/${obj.url}.png`} alt={obj.title} style={{ width: 36 }} />,
        title: obj.title,
    }));

    showShareActionSheet = () => {
        ActionSheet.showShareActionSheetWithOptions({
            options: this.dataList,
            // title: 'title',
            message: 'I am description, description, description',
        },
            (buttonIndex) => {
                this.setState({ clicked1: buttonIndex > -1 ? this.dataList[buttonIndex].title : 'cancel' });
                // also support Promise
                return new Promise((resolve) => {
                    Toast.info('closed after 1000ms');
                    setTimeout(resolve, 1000);
                });
            });
    }
    componentDidMount(){
        console.log(11)
       this.setState({
           userData: this.props.location.state.user,
           contentData: this.props.location.state.content
       })
    }
    backHandle = () => {
        this.props.history.push('/home');
    }
    render() {

        // const userData = this.props.location.state.user
        // const contentData = this.props.location.state.content
        const userData = this.state.userData
        const contentData = this.state.contentData
        const imgList = [
            {
                src: "https://cdn.img.wenhairu.com/images/2020/01/16/ALsNv.png",
                alt: "First image description"
            }, {
                src: "https://cdn.img.wenhairu.com/images/2020/03/26/F8wNn.jpg",
                alt: "Second image description"
            }, {
                src: "https://cdn.img.wenhairu.com/images/2020/03/26/F8wNn.jpg",
                alt: "Second image description"
            }
        ]
        return (
            <div style={{width:'100%',height:'100%'}}>
                <NavBar
                    onLeftClick={this.backHandle}
                    leftContent={<LeftOutlined style={{ fontSize: 20, color: '#fff' }} />}
                    rightContent={
                        <Icon key="1" type="ellipsis" onClick={this.showShareActionSheet} />
                    }
                > 文章详情页</NavBar>
                <AppPage>
                    <WhiteSpace size='lg'></WhiteSpace>
                    <WingBlank>
                        <div className='contentPageHeader'>
                            <div className='contentPageLeft'>
                                <div className='contentPageAvatar'>
                                    <img src={userData.userAvatar} alt="" />

                                </div>
                                <div className='contentPageMsg'>
                                    <div className='contentPageUser'>
                                        <div style={{ color: '#2d3436', marginRight: '6px' }}>{userData.userName}</div>
                                        <MyBadge data={userData}/>
                                    </div>
                                    <div style={{ fontSize: 12, color: '#888' }}>4-13</div>
                                </div>
                            </div>
                            <div>
                                <Follow></Follow>
                            </div>
                        </div>
                        <WhiteSpace size='lg'></WhiteSpace>
                        <div style={{ color: '#141414' }}>
                            <div style={{ fontWeight: 'bold', fontSize: 18, marginBottom: '0.6vh' }}>{contentData.articleName}</div>
                            {contentData.articleContent}
                            <div className='content-imgs'>
                            {/* {imgList.map((v,index )=>{
                                return(
                                    <div className='content-imgs-item' key={index}>
                                        <Zmage backdrop='#F5F5F9'
                                            zIndex={19260817}
                                            src={v.src} />
                                    </div>
                                )
                            })}                                 */}
                            </div>
                        </div>
                        <BarTag></BarTag>
                        <WhiteSpace size='lg'></WhiteSpace>
                        <WhiteSpace size='lg'></WhiteSpace>
                        <WhiteSpace size='lg'></WhiteSpace>

                        <Comment></Comment>
                        <Comment></Comment>

                        <WhiteSpace size='lg'></WhiteSpace>
                        <WhiteSpace size='lg'></WhiteSpace>
                        <WhiteSpace size='lg'></WhiteSpace>
                    </WingBlank>
                    <StickInput></StickInput>
                </AppPage>

            </div>
        )
    }
}
